<template>
    <div v-for="item in newsList" :key="item.id">
        <img :src="item.img">
        <div id="body">
            <p>{{item.p}}</p>
            <div>{{item.div}}</div>
        </div>
    </div>
</template>

<script>
import { getApi } from "@/util/api.js";
export default {
    name: "NewsList",

    data() {
        return {
            newsList: [],
        }   ;
    },
    mounted() {
        this.getNewsList();
    },
    methods: {
        getNewsList() {
        let url = "https://d.app3c.cn/mcm/api/DangDu/";
        getApi(url).then((res) => {
            this.newsList = res.data;
            console.log(this.newsList);
        });
        },
    },
};
</script>

<style lang="scss" scoped>
    div{
        width: 96%;
        margin-left: 2vw;
        margin-bottom: 2vw;
        background: #fff;
        border-radius: 2%;
        img{
            width: 100%;
        }
        #body{
            display: flex;
            padding-top: 2vw;
            padding-bottom: 1vw;
            p{
                padding-left: 2vw;
                width: 50%;
                font-weight: bold;
                font-size: 4vw;
            }
            div{
                width: 50%;
                font-size: 4vw;
                background: rgb(134, 92, 162);
                border-radius: 2%;
                color: #fff;
            }
        }
    }
</style>